<template>
  <el-single-select
    :dataObj="singleSelectData"
    :prop="singleSelectColumn"
    :pageSize="formDate.pageSize"
    :total="singleSelectPageTotal"
    :pageSizeCode="formDate.pageSize"
    :pageSizes="pageSizes"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
    @confirm="confirm"
    :dialogVisible.sync="dialogVisible"
    :title="title"
  >
    <template slot="dialogTop">
      <div class="dialog-input">
        <span class="label">变更策划名称：</span>
        <el-input
          placeholder="请输入变更策划名称"
          v-model="formDate.name"
          style="width: 260px"
          clearable
        ></el-input>
      </div>
      <div class="dialog-input">
        <span class="label">编码：</span>
        <el-input
          placeholder="请输入编码"
          v-model="formDate.planCode"
          style="width: 260px"
          clearable
        ></el-input>
      </div>
      <!-- <div class="dialog-input">
        <span class="label"> 统一社会信用代码：</span>
        <el-input
          placeholder="请输入统一社会信用代码"
          v-model="formDate.unifiedCode"
          style="width: 260px"
          clearable
        ></el-input>
      </div> -->
      <div style="width: 100%; display: flex; justify-content: center">
        <el-button
          size="mini"
          type="primary-font-mini"
          @click="singleSelectSearch"
          >搜索
        </el-button>
        <el-button size="mini" type="default-mini" @click="handleReset"
          >重置
        </el-button>
      </div>
    </template>
  </el-single-select>
</template>
<script>
import { listPageChangesPlanDetail } from "../api/item-list";
export default {
  name: "contactSupplier",
  data() {
    return {
      title: "选择变索赔更策划",
      // 招标结果关联弹窗相关变量 start
      formDate: {
        name: "",
        planCode: "",
        pageNo: 1,
        pageSize: 10
      },
      singleSelectData: [],
      pageSizes: [10, 20, 50, 100, 500],
      singleSelectColumn: [
        { prop: "planCode", label: "编码", width: "150" },
        { prop: "name", label: "变更策划名称", width: "150" },
        { prop: "content", label: "变更内容", width: "150" },
        { prop: "accord", label: "变更理由及依据", width: "150" }
      ],
      singleSelectPageTotal: 0,
      dialogVisible: false

      // 招标结果关联弹窗相关变量 end
    };
  },
  watch: {
    $route(to, from) {
      if (
        to.name == "contractChangeEntry-edit-item" ||
        to.name == "contractChangeEntry-add-item"
      ) {
        this.listPageChangesPlanDetail();
      }
    }
  },
  created() {
    this.formDate.orgid = JSON.parse(localStorage.getItem("userInfo")).orgId;
    this.listPageChangesPlanDetail();
  },
  methods: {
    listPageChangesPlanDetail() {
      listPageChangesPlanDetail(this.formDate).then(res => {
        this.singleSelectData = res.data.data.rows;
        this.singleSelectPageTotal = res.data.data.recordsTotal;
      });
    },
    //搜索
    singleSelectSearch() {
      this.listPageChangesPlanDetail();
    },
    //重置
    handleReset() {
      this.formDate.name = "";
      this.formDate.planCode = "";
    },
    // 招标结果关联弹窗 切换每页条数
    handleSizeChange(val) {
      this.formDate.pageSize = val;
      this.listPageChangesPlanDetail();
    },
    // 招标结果关联弹窗 切换页
    handleCurrentChange(val) {
      this.formDate.pageNo = val;
      this.listPageChangesPlanDetail();
    },
    // 招标结果关联弹窗 显示与隐藏
    showSingleSelect() {
      this.dialogVisible = true;
    },
    // 确定
    confirm(val) {
      this.$emit("planCode", val);
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
/deep/.el-single-select
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-dialog-box
  .dialog-top {
  justify-content: space-between;
}
/deep/ .el-table__body-wrapper {
  max-height: 230px !important;
}
/deep/.label {
  display: inline-block;
  width: 130px !important;
  text-align: right;
}
/deep/.el-dialog__wrapper {
  background: #767676;
}
</style>
